<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle :title="title" :is_name="true" :is_back="true" :is_lang="false" :is_kf="false"></gltitle>
    </template>
    <template #content>

      <div class="container">
        <div class="p1">
          <span>{{ $t('page3.doc76') }}</span>
          <div><img src="../../assets/images/ico_bi1.png" alt="">USDT</div>
        </div>
        <div class="p2">
          <ul>
            <li>
              <div class="pic">
                <img src="../../assets/images/Name1.png" alt="">
                <span>{{ $t('page4.doc31') }}</span>
              </div>
              <div class="z">
                <span>{{ $t('page3.doc77') }}</span>{{ income_info.totalAmount }}
              </div>
            </li>
            <li>
              <div class="pic">
                <img src="../../assets/images/Name2.png" alt="">
                <span>{{ $t('page4.doc30') }}</span>
              </div>
              <div class="z"><span>{{ $t('page3.doc77') }}</span>{{ income_info.electronBalance }}</div>
            </li>
          </ul>
        </div>
        <div class="p3">
          <span class="t">{{ $t('page3.doc78') }}</span>
          <div>
            <input type="number" :placeholder="$t('page3.doc79')" v-model="amount" />
            <span class="n" @click="whole">{{ $t('page3.doc80') }}</span>
          </div>
        </div>
      </div>


      <van-popup v-model="password_show" round :position="is_position" style="background: none;">
        <div class="password_pop">
          <div class="pass">
            <div class="title rel tac">
              {{ $t('page.doc28') }}
              <div class="abs" @click="passwordShowClick">
                <van-icon name="cross" />
              </div>
            </div>
            <div class="box rel" :class="{ on: isPc }">
              <input type="text" v-model="password" maxlength="6" class="abs" ref="getFocus">
              <van-password-input :gutter="20" :value="password" :length="6" :focused="showKeyboard"
                @focus="showKeyboard = true" />
            </div>
            <button @click="getBtn" :disabled="isDisable">{{ $t('page.doc29') }}</button>
          </div>
          <div class="jianpan" v-if="!isPc">
            <p>{{ $t('page.doc30') }}</p>
            <van-number-keyboard v-model="password" :show="showKeyboard" @blur="showKeyboard = true" />
          </div>
        </div>
      </van-popup>
    </template>

    <template #footer>
      <div class="p4">
        <button class="btn " @click="onGo()">{{ $t('page3.doc81') }}</button>

      </div>

    </template>
  </page-scroll>
</template>
<script>
import { mapActions, mapMutations, mapGetters } from "vuex";

export default {
  data() {
    return {
      title: this.$t("page3.doc75"),
      titleRight: "<img src=" + require("../../assets/images/ico1.png") + ">",
      amount: '',
      password_show: false,
      showKeyboard: true,
      isPc: false,
      is_position: 'bottom',
      isDisable: false,
      password: '',
      income_info: {}
    };
  },

  mounted() {
  },
  created() {
    this.getIncome()
  },
  computed: {},
  watch: {},

  methods: {
    // 全部按钮
    whole() {
      this.amount = this.income_info.totalAmount
    },
    getIncome() {
      this.$post(this.URL.income.assets, {}).then((res) => {
        if (res.code == 0) {
          this.income_info = res.data
        }
      });
    },
    passwordShowClick() {
      this.password_show = false
      this.password = ''
    },
    onGo() {
      this.password_show = true
    },
    getBtn() {
      this.isDisable = true
      setTimeout(() => {
        this.isDisable = false
      }, 1000)


      if (!this.isDisable) {
        return
      }
      this.$post(this.URL.wallet.transfer, {
        amount: this.amount,
        password: this.$md5(this.password)
      }).then((res) => {
        if (res.code == 0) {
          this.amount = ''
          this.password_show = false
          this.password = ''
          this.getIncome()
          this.$toast(res.message)
        } else {
          this.$toast(res.message)
        }
      });

    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .head {
  background: transparent !important;
  height: 1.4rem;
  display: flex;
  align-items: center;
}


.page {
  background: #0d2622 url("../../assets/images/main-bg.png") no-repeat scroll;
  background-size: 100% auto !important;
  min-height: 100vh;
  padding-bottom: 60px;
}

.container {
  margin-top: 0.4rem;
}

.p1 {
  margin-top: .24rem;

  span {
    display: block;
    font-size: 0.28rem;
    text-transform: uppercase;
  }

  div {
    border-radius: 0.16rem;
    // border: var(--COborder3);
    background: url("../../assets/images/singBg.png") no-repeat;
    background-size: 100% 100%;
    margin: .17rem 0 .24rem 0;
    height: 0.88rem;
    display: flex;
    align-items: center;
    padding: 0 .24rem;
    font-size: 0.3rem;

    img {
      width: 0.44rem;
      height: 0.44rem;
      margin-right: .14rem;
    }
  }
}

.p2 {
  color: var(COcolor3);
  border-radius: 0.16rem;
  // border: var(--COborder3);
  margin-bottom: .3rem;

  ul {
    background: url("../../assets/images/dbBg.png") no-repeat;
    background-size: 100% 100%;

    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .24rem;

      .z {
        span {
          color: var(--COcolor1);
        }
      }

      .pic {
        display: flex;
        align-items: center;
      }

      img {
        width: 0.48rem;
        height: 0.48rem;
        margin-right: .14rem;
      }
    }
  }
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.p3 {
  .t {
    display: block;
    font-size: 0.28rem;
    text-transform: uppercase;
  }

  div {
    border-radius: 0.16rem;
    // border: var(--COborder3);
    background: url("../../assets/images/singBg.png") no-repeat;
    background-size: 100% 100%;
    margin: .17rem 0 .24rem 0;
    height: 0.88rem;
    display: flex;
    align-items: center;
    padding: 0 .24rem;

    justify-content: space-between;

    .n {
      color: var(--COcolor2);
    }

    input {
      height: 30px;
      height: 0.59406rem;
      width: 70%;
      background: none;
      border: navajowhite;
      color: var(--COcolor3);
    }
  }

  margin-bottom: 24px;
}

.p4 {
  padding: .28rem;
}
</style>